<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>blob协议</title>
</head>

<body>
    <img src="" alt="" id="pic" width="300">
    <input type="file" id="file" />
    <script>
        // ES6 file对象 blob blob:// 在文件上传
        // 解决什么问题
        // 传统ES5时代文件只有上传到服务器后，静态服务器提供一个远程地址给我们，才能够看到我们上传的这张图片
        // ES6 在本地客户端操作文件的能力 file对象
        // blob协议在本地就把它立马显示出来，配上上传进度，更好的用户体验
        document
            .getElementById('file')
            .addEventListener('change', (e) => {
                const file = e.target.files[0];
                // console.log(Object.prototype.toString.call(file));
                const URL = window.URL; // ES6 URL对象
                const objectUrl = URL.createObjectURL(file); // 为文件创建URL 使用blob协议
                console.log(objectUrl);
                const pic = document.getElementById('pic');
                pic.src = objectUrl; // 上传之前就可以看到图片
                pic.onload = function() {
                    URL.revokeObjectURL(objectUrl);
                    console.log('为了获得最佳性能和内存使用，释放对象')
                }
            })
    </script>
</body>

</html>